<template>
  <el-dialog
    width="90%"
    title=""
    custom-class="techDialog"
    :visible.sync="techVisible"
    :modal="false"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-dialog
      width="30%"
      custom-class="techDialog"
      title="请选择对应的申请表填写"
      :visible.sync="downloadVisible"
      append-to-body
    >
      <div v-if="selectTechData.length > 0" class="tips font16">
        已选择限制类技术 ：{{ selectTechData[0].projectName }}
      </div>
      <div class="flex flex-column align-left">
        <el-link
          type="primary"
          :underline="false"
          class="mt20"
          @click="downTechDoc(1)"
        >1、非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（操作技术）</el-link>
        <el-link
          type="primary"
          :underline="false"
          class="mt15 mb30"
          @click="downTechDoc(2)"
        >2、非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（检验检查）</el-link>
      </div>
    </el-dialog>
    <el-dialog
      width="30%"
      custom-class="techDialog"
      title="请选择对应的申请表填写"
      :visible.sync="downloadFirstVisible"
      append-to-body
    >
      <div class="tips font16">
        无收费即为首家新技术，请填写以下表格
      </div>
      <div class="flex flex-column align-left">
        <el-link
          type="primary"
          :underline="false"
          class="mt20"
          @click="downFirstTechDoc(1)"
        >1、上海首家模板</el-link>
        <el-link
          type="primary"
          :underline="false"
          class="mt15"
          @click="downFirstTechDoc(2)"
        >2、首家使用——甘肃省医疗技术临床应用能力评估申请书</el-link>
        <el-link
          type="primary"
          :underline="false"
          class="mt15 mb30"
          @click="downFirstTechDoc(3)"
        >3、附件-技术申报初筛表（首家或限制类使用）.docx</el-link>
      </div>
    </el-dialog>
    <div slot="title" class="clearfix flex flex-row align-center">
      <div class="line" />
      <span
        class="font16 ml10 fw600"
      >请在以下列表中寻找是否有您需要的收费条目</span>
      <el-button
        type="success"
        round
        icon="el-icon-download"
        size="small"
        class="ml50"
        @click="limitDownload"
      >下载非限制类列表</el-button>
    </div>
    <el-form ref="queryTechForm" :model="queryParams" :inline="true">
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleLimitQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="small"
          @click="resetLimitQuery"
        >重置</el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button
          type="danger"
          icon="el-icon-warning-outline"
          size="small"
          @click="backToLimit"
        >返回</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="techTable"
      v-loading="loading"
      border
      tooltip-effect="dark"
      :data="techList"
      :header-cell-class-name="cellClass"
      @select="selectTech"
    >
      <el-table-column
        type="selection"
        width="80"
        align="center"
      />
      <el-table-column
        label="支付方法"
        prop="paymentMethod"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="项目名称"
        prop="projectName"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="项目内涵"
        prop="projectDesc"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="除外内容"
        prop="remark"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="计价单位"
        prop="priceUnit"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="收费标准"
        prop="chargeStandard"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="限定内容"
        prop="limitedContent"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="费用类别"
        prop="expenseType"
        align="center"
        :show-overflow-tooltip="true"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      class="tech"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      @pagination="getNewTechListHandel"
    />
    <div slot="footer" class="flex flex-row">
      <div v-if="selectTechData.length == 0" class="tips flex-auto text-left">
        未选择
      </div>
      <div v-else class="tips flex-auto text-left">
        已选择：{{ selectTechData[0].projectName }}
      </div>
      <div class="btn-list">
        <el-button size="small" @click="close">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="selectTechData.length == 0"
          @click="downloadVisible = true"
        >确认选择，非限制类申报</el-button>
        <el-button
          size="small"
          type="warning"
          @click="downloadFirstVisible = true"
        >未查询到相关技术，首家申报</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {getTechList, getNewTechList, exportLimitTechList, exportTechList} from '@/api/xjs/tech'
export default {
  name: 'TechDialog',
  data() {
    return {
      techList: [],
      selectTechData: [],
      loading: false,
      techVisible: false,
      downloadVisible: false,
      downloadFirstVisible: false,
      total: 0,
      queryParams: {
        currentPage: 1,
        pageSize: 5,
        projectName: ''
      }
    }
  },
  methods: {
    backToLimit() {
      this.$emit('showLimit')
    },
    close() {
      this.techVisible = false
    },
    open() {
      this.techVisible = true
      // this.getTechListHandel()
      this.getNewTechListHandel()
    },
    limitDownload() {
      exportTechList({pageSize:1}).then(res=>{
        // console.log(res)
        const blob = new Blob([res], { type: 'application/vnd.ms-excel;' })
        let downloadUrl = window.URL.createObjectURL(blob);
        let a = document.createElement('a')
        a.href = downloadUrl
        a.download = '非限制类列表.xlsx'
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        a.remove()
      })
    },
    downTechDoc(type) {
      var a = document.createElement('a')
      switch (type) {
        case 1:
          a.href =
            '/static/xjs/非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（操作技术）.docx'
          a.download =
            '非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（操作技术）.docx'
          break
        case 2:
          a.href =
            '/static/xjs/非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（检验检查）.docx'
          a.download =
            '非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（检验检查）.docx'
          break
      }
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    downFirstTechDoc(type) {
      var a = document.createElement('a')
      switch (type) {
        case 1:
          a.href = '/static/xjs/上海首家模板.doc'
          a.download = '上海首家模板.doc'
          break
        case 2:
          a.href =
            '/static/xjs/首家使用——甘肃省医疗技术临床应用能力评估申请书.doc'
          a.download = '首家使用——甘肃省医疗技术临床应用能力评估申请书.doc'
          break
        case 3:
          a.href = '/static/xjs/附件-技术申报初筛表（首家或限制类使用）.docx'
          a.download = '附件-技术申报初筛表（首家或限制类使用）.docx'
          break
      }
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    // 隐藏表头中的全选框
    cellClass(row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    selectTech(selection, row) {
      // 清除 所有勾选项
      this.selectTechData = []
      this.$refs.techTable.clearSelection()
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return
      this.$refs.techTable.toggleRowSelection(row, true)
      this.selectTechData.push(row)
      console.log(this.selectTechData)
    },

    handleLimitQuery() {
      this.queryParams.currentPage = 1
      this.getNewTechListHandel()
    },
    /** 重置按钮操作 */
    resetLimitQuery() {
      this.resetForm('queryTechForm')
      this.handleLimitQuery()
    },
    handleSelectionChange(selection) {},
    getTechListHandel() {
      this.selectTechData = []
      this.loading = true
      getTechList(this.queryParams, this.dateRange).then(response => {
        this.techList = response.data.list
        this.total = response.data.count
        this.loading = false
      })
    },
    getNewTechListHandel() {
      this.selectTechData = []
      this.loading = true
      getNewTechList(this.queryParams).then(response => {
        console.log(5555,response)
        this.techList = response.records
        this.total = response.total
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pager li {
    padding: 0 4px;
    background: #fff;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
}
</style>
